<template>
  <!-- 卡位出租池 添加卡位 -->
  <el-dialog title="添加卡位" :visible.sync="dialogVisible" :close-on-click-modal="false" fullscreen width="1300px">
    <div>
      <el-button type="primary" plain @click="close">返回</el-button>
    </div>
    <div class="task_goods_add_box" v-loading="loading">
      <div class="content-box flex">
        <div class="left">
          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="auto">
            <el-form-item label="卡位编号" prop="num">
              <el-input
                v-model="queryParams.num"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
              <el-input
                v-model="queryParams.tel"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary" icon="el-icon-search" @click="queryParams.pageNum=1; getList()">搜索</el-button>
            </el-form-item>
          </el-form>
          <div class="table_box" v-if="dialogVisible">
            <el-table ref="table" stripe :data="unAddTable.rows" row-key="id" style="width: 100%" @selection-change="handleSelection">
              <el-table-column label="全选" reserve-selection type="selection" width="55">
              </el-table-column>
              <el-table-column prop="num" label="卡位编号" width="120"></el-table-column>
              <el-table-column prop="tel" label="手机号" width="150"></el-table-column>
              <el-table-column prop="custodian" label="保管人" width="100"></el-table-column>
              <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip></el-table-column>
            </el-table>
            <pagination v-show="unAddTable.total > 0" :total="unAddTable.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
          </div>
        </div>
        <div class="right">
          <!-- 已选择的商品 -->
          <h2>本次选择的卡位（{{selects.length}}）</h2>
          <div class="table_box">
            <el-table height="516px" stripe :data="selects" style="width: 100%">
              <el-table-column prop="num" label="卡位编号" width="120"></el-table-column>
              <el-table-column prop="tel" label="手机号" width="150"></el-table-column>
              <el-table-column prop="custodian" label="保管人" width="100"></el-table-column>
              <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="del" @click="remove(scope.row)">移除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="center">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" @click="submitForm('form')" v-loading="loading">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import phoneApi from "@/api/phoneManage";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      unAddTable: {
        rows: [],
        total: 0,
      },
      selects: [],
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        type: [{ required: true, message: "请输入", trigger: "change" }],
        intervalDays: [
          { required: true, message: "请输入", trigger: "change" },
        ],
      },
    };
  },
  created() {},
  methods: {
    // 打开弹窗
    open() {
      this.queryParams = {
        pageSize: 10,
        pageNum: 1,
      };
      this.selects = [];
      this.dialogVisible = true;
      this.getList();
    },
    // 获取未加入出租池的手机号
    getList() {
      this.loading = true;
      this.queryParams.isLease = 1
      phoneApi
        .getleaseList(this.queryParams)
        .then((response) => {
          this.loading = false;
          this.unAddTable = response;
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 表格选择项改变
    handleSelection(arr) {
      this.selects = arr;
    },
    //移除已选择
    remove(row) {
      this.$refs.table.toggleRowSelection(row, false);
    },
    // 重置
    reset() {
      this.form = {
        pageNum: 1,
        pageSize: 10,
      };
      this.$refs.form.resetFields();
    },

    submitForm(formName) {
      if (this.selects.length == 0) {
        return this.$message.error("请选择卡位！");
      }
      this.$confirm("卡位添加到出租池后将不能在发布商品时选择使用，确认将已选择的卡位添加到出租池中吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          // 保存商品 monitorTaskId:监控id
          // goodsIds: 逗号分割的商品ids
          let goodsIds = [];
          for (let i = 0; i < this.selects.length; i++) {
            const selectItem = this.selects[i];
            goodsIds.push(selectItem.id);
          }
          phoneApi
            .updateIsLease({
              ids: goodsIds,
              isLease: 2,
            })
            .then((res) => {
              this.loading = false;
              this.$message.success(res.msg);
              this.dialogVisible = false;
              this.$parent.getList();
            })
            .catch((err) => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">

.task_goods_add_box {
  width: 100%;
  .content-box {
    width: 100%;
    flex-wrap: nowrap;
    margin-top: 10px;
    min-height: 600px;
    > div {
      width: 50%;
    }
    .left {
      margin-right: 10px;
    }
  }
}
::v-deep .el-dialog__body {
  max-height: calc(100vh - 120px) !important;
}
</style>
